<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- can i figure out strict? -->
<html> 
<head> 
	<title>WebTag - landscape</title> 
	 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=480; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

<!--	<link rel="apple-touch-icon-precomposed" href="jqtouch.png" />-->
<!--	<link rel="apple-touch-startup-image" href="jqt_startup.png" />-->
	<!-- <meta name="apple-touch-fullscreen" content="yes" /> <!-- does this actually do anything? -->
	<meta name="apple-mobile-web-app-capable" content="yes" />

	<script type="text/javascript" src="jq/trunk_20100330/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="jq/trunk_20100330/jqtouch.js"></script>

	<script type="text/javascript" src="UI.js"></script>
	<script type="text/javascript" src="iPhone.js"></script>

	<link rel="stylesheet" type="text/css" href="../css/general.css" />
	<link rel="stylesheet" type="text/css" href="css/iLandscape.css" />

	<script type="text/javascript">
		$.jQTouch({
			/*icon: 'jq/jqtouch.png',*/
			/*statusBar: 'black-translucent'*/
		});

		/* why does this fire twice sometimes? */
		function tagSwipe(event, info) {
			confirm("tag swipe");
		}

		$(document).ready(function() {

//			$("#picture").swipe(function(event, info) {
//				confirm("pic swipe");
//			});

//			$("#tags, #tags li").addClass("touch").swipe(tagSwipe);
			$("#picture").click(function(event, info) {
				var jQT = new $.jQTouch();
				jQT.goTo("#renamePopup", "flip");
				/*this.width = this.width == 180 ? 240 : 180;
				this.height = this.height == 180 ? 240 : 180;*/
			});
		});

//	    var jQT = new $.jQTouch();

//		$(function(){
//		    jQT.addAnimation({
//		        name: 'reveal',
//		        selector: '.revealme'
//		    });
//		});
	</script>

	<style>
		.reveal.in {
		    -webkit-animation-name: dontmove;
		    z-index: 0;
		}

		.reveal.out {
		    -webkit-animation-name: revealout;
		    z-index: 10;
		}

		.reveal.out.reverse {
		    z-index: 0;
		    -webkit-animation-name: dontmove;
		}

		.reveal.in.reverse {
		    z-index: 10;
		    -webkit-animation-name: revealin;
		}


		@-webkit-keyframes revealin {
		    from { -webkit-transform: translateX(100%); }
		    to { -webkit-transform: translateX(0); }
		}

		@-webkit-keyframes revealout {
		    from { -webkit-transform: translateX(0); }
		    to { -webkit-transform: translateX(100%); }
		}
	</style>

</head>
<body onload="removeAddressBar()" id="jqt"> 

<div id="mainDiv">

<div id="firstColumn">
	<div id="navDiv">
		<div id="pictureDiv">
			<img id="picture" class="touch" src="bgtest.png" width="180" height="240" />
		</div>

		<div id="prevDiv">&#171;</div>

		<div id="nextDiv">&#187;</div>

		<div id="setDiv">New Year's Day brunch 2010</div>

		<div id="posDiv">10 of 1,342</div>
	</div>

	<div id="infoDiv">
		<h2 id="title" class="ellipsis">text goes here.  where does this text flow?  why or why not?  analyze!</h2>
		<p id="desc">description goes here.  how does it flow and what size?</p>
	</div>
</div> <!-- firstColumn -->

<div id="secondColumn">
	<div id="pads">
		<ul>
			<!-- add onclick handler to all of these using jQuery -->
			<li onclick="padClicked(this)"></li>
			<li>8</li>
			<li>9</li>

			<li>4</li>
			<li>5</li>
			<li>groomsmans</li>

			<li>1 2 3 4 5 6 7 8 9 0 a b c d e f 0 1 2 3 4 5 6 7 8 9 a b c d e f 0</li>
			<li>holiday-party</li>
			<li>bridesmaid</li>
		</ul>
	</div>

	<div id="tagsDiv">
		<ul id="tags">
			<li>Andy</li>
			<li>Brianne</li>
			<li>cep</li>
			<li>DC</li>
			<li>ehs</li>
			<li>Gina</li>
			<li>Jeremy</li>
			<li>Justin</li>
			<li>Kimberly</li>
			<li>Kyle</li>
			<li>Lauren</li>
			<li>Tyler</li>
			<li>Andy</li>
			<li>Brianne</li>
			<li>cep</li>
			<li>DC</li>
			<li>ehs</li>
			<li>Gina</li>
			<li>Jeremy</li>
			<li>Justin</li>
			<li>Kimberly</li>
			<li>Kyle</li>
			<li>Lauren</li>
			<li>Tyler</li>
		</ul>
	</div>
</div> <!-- secondColumn -->

</div> <!-- mainDiv -->

<div id="overlay"></div>

<div id="renamePopup" class="popup">
	<p id="renameTitle">Select a pad to rename</p>
	<form name="renameForm" onsubmit="renamePad(); return false;"> <!-- return false doesn't seem to work here -->
		<input type="text" id="renameText" name="tag" size="20" />
		<input type="submit" value="Save" />
		<input type="button" value="Done" onclick="doneRenaming();" />
	</form>
</div>

	</body> 
</html> 
	
